import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import $ from 'jquery';
import './classification_right.scss';


class ClassificationRight extends Component {

    componentDidUpdate() {
        let $H3 = $('.ClassificationRight h3');
        $H3.eq(1).css('border-left', '.05rem solid #009944');
        $H3.eq(2).css('border-left', '.05rem solid #7ecdf2');
        $H3.eq(3).css('border-left', '.05rem solid #920783');
    }

    render() {
        return (
            <div className="ClassificationRight">
                <img src={require('../../../static/img/classification/banner.jpg')} />
                {this.props.listskey && this.props.listskey.map((item, key) =>
                    <div className="ClassificationRight_box" key={key}>
                        <div className="ClassificationRight_title clearfix">
                            <h3>{item.labelName}</h3>
                        </div>
                        <ul className="ClassificationRight_content clearfix">
                            {item.labelData.map((val, inx) => 
                                <li key={inx}>
                                    <Link to={{ pathname: '/list', query: { searchkeyword : val.name } }}>
                                        {val.name}
                                    </Link>
                                </li>
                            )}
                        </ul>
                    </div>
                )}
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    let listskey = state.proClassification.data.navData;
    return {
        listskey: listskey
    }
}

export default connect(mapStateToProps)(ClassificationRight);